<!DOCTYPE html>
<html>
<head>
    <title>Relativity Physics Diagram</title>
</head>
<body>
<canvas id="relativity-canvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById('relativity-canvas');
    const ctx = canvas.getContext('2d');

    // Style and context setup
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // Helper function for drawing arrows (for axes and vectors)
    function drawArrow(fromX, fromY, toX, toY, headLength = 10) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // Helper for drawing solid circle points
    function drawPoint(x, y, radius = 3) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fill();
    }

    // Coordinates and layout
    const origin = { x: 150, y: 250 };
    
    // --- Draw Axes ---
    ctx.lineWidth = 1.5;
    drawArrow(origin.x - 130, origin.y, origin.x + 300, origin.y); // x-axis
    drawArrow(origin.x, origin.y + 200, origin.x, origin.y - 220); // y-axis

    // --- Define and draw elements on axes ---
    const v_len = 30;

    // Y-axis (positive side) elements in order from O upwards
    const v1_y_center = origin.y - 50; // Center of velocity arrow for ship 1
    const p1_y = v1_y_center - 50;     // Position of point for ship 1
    const p_y = p1_y - 60;             // Position of point P
    
    // Y-axis (negative side) elements in order from O downwards
    const p2_y = origin.y + 80;        // Position of point for ship 2
    const v2_y_center = p2_y + 25;     // Center of velocity arrow for ship 2

    // X-axis (positive side) elements in order from O rightwards
    const p3_x = origin.x + 80;        // Position of point for ship 3
    const v3_x_center = p3_x + 35;     // Center of velocity arrow for ship 3

    // Draw all points
    drawPoint(origin.x, origin.y);
    drawPoint(origin.x, p1_y);
    drawPoint(origin.x, p_y);
    drawPoint(origin.x, p2_y);
    drawPoint(p3_x, origin.y);

    // Draw all velocity vectors
    ctx.lineWidth = 1;
    drawArrow(origin.x, v1_y_center + v_len / 2, origin.x, v1_y_center - v_len / 2); // Arrow 1 (up)
    drawArrow(origin.x, v2_y_center - v_len / 2, origin.x, v2_y_center + v_len / 2); // Arrow 2 (down)
    drawArrow(v3_x_center - 25, origin.y, v3_x_center + 25, origin.y);              // Arrow 3 (right), length 50

    // --- Draw All Labels ---
    
    // Axes and Origin Labels
    ctx.font = '22px Times New Roman';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'top';
    ctx.fillText('O', origin.x - 10, origin.y + 5);

    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('y', origin.x + 10, origin.y - 225);
    ctx.textAlign = 'center';
    ctx.fillText('x', origin.x + 305, origin.y + 15);
    
    // S-frame label
    ctx.font = 'italic 24px Times New Roman';
    ctx.textAlign = 'left';
    ctx.fillText('S', 350, 80);
    ctx.font = '24px Times New Roman';
    ctx.fillText('系', 365, 80);

    // Point labels
    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.fillText('P', origin.x - 10, p_y);
    ctx.textAlign = 'left';
    ctx.fillText('y=l', origin.x + 10, p_y);

    ctx.font = '22px Times New Roman';
    ctx.textAlign = 'right';
    ctx.fillText('1', origin.x - 10, p1_y + 15);
    ctx.fillText('2', origin.x - 10, p2_y);
    
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText('3', p3_x, origin.y + 10);
    
    // Velocity labels
    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('v', origin.x + 10, v1_y_center);
    ctx.fillText('v', origin.x + 10, v2_y_center);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('v', v3_x_center, origin.y - 5);

</script>
</body>
</html>